<template>
	<div style="background: #F3F4F5;">
		<el-row>
			<el-col :span="5">
				<zl-tree @on-select="selectZl" />
			</el-col>
			
			<el-col :span="13">
				<center :centerParam.sync="centerParam"/>
			</el-col>
			
			<el-col :span="6" style="background-color: #fff;border: 1px solid darkgray;padding: 5px;">
				<car-tree @on-selected="selectCars" />
			</el-col>
			
			
		</el-row>
		
		
	</div>
</template>

<script>
	import carTree from './zlxf/car-tree.vue'
	import zlTree from './zlxf/zl-tree.vue'
	import zlxfCenter from './zlxf/center.vue'
	
	export default {
		
		components:{
			'car-tree':carTree,
			'zl-tree':zlTree,
			'center':zlxfCenter
		},
		data(){
			
			return {
				
				centerParam:{
					cars:[],
					zl:{}
				}
				
				
			}
			
		},
		methods:{
			selectCars(p){
				this.centerParam.cars=p.data
			},
			selectZl(p){
				this.centerParam.zl=p
			}
		}
		
		
		
	}
	
	
	
</script>

<style>
</style>